<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    img {
        width: 200px;
        height: 200px;
        margin-top: 40px;
    }
    #main div{
        float: left;
        margin-left: 100px;
        margin-top: 100px;
        width: 400px;
        height: 450px;
        border: 4px dashed pink;
        border-radius: 5px;
        text-align: center;
        /* box-shadow: 0px 0px 60px pink; */
        /* background-color: lavenderblush; */
    }

    input{
        width: 300px;
        height: 30px;
        border-radius: 50px;
        border: none;
        background-color: #cccccc;
    }
    input:hover{
        /* border: none; */
        background-color: #FC5531;
    }
    .price{
        color: red;
        font-weight: 700;
    }
</style>

<body>
    <div id="main">
        <shop v-for="arr in arrs" :json="arr"></shop>
    </div>
</body>
<script>
    let shop = {
        props: ['json'],
        template: '<div><img :src="json.img"> <p>商品名：{{json.name}}</p> <p class="price">价格：￥{{json.price}}</p> <p>商品介绍：{{json.introduce}}</p> <p><input type="submit" value="购买"></p></div>'
    }
    let vm = new Vue({
        el: '#main',
        data: {
            arrs: [
                { name: '手机', img: './img/phone.jpg', price: '3600',introduce:'能背媳妇，能打怪，八戒手机'},
                { name: '口罩', img: './img/mask.jpg', price: '37.5',introduce:'就是普普通通的医用口罩，觉得贵你别买'}
            ]
        },
        components: {
            shop: shop
        }
    })
</script>

</html>